<template>
  <div>
    <el-dialog title="添加角色" :visible.sync="open" width="500px" :before-close="emptyClose" append-to-body>
        <el-row class="margin-top-sm padding-left padding-right height500">
          <el-col :span="10">
            <div class="border-bottom flex justify-between align-start" style="height:30px">添加角色</div>
              <div class="margin-top">
                <el-input v-model="queryParams.orgName" placeholder="请输入角色名称" @input="inputNULL">
                  <i
                      class="el-icon-search el-input__icon"
                      slot="suffix"
                      @click="search">
                  </i>
              </el-input>
            </div>
            <div class="margin-top padding-left-xs padding-right-xs">
                <el-row>
                  <el-col v-for="item in treeListcopy" :key="item.id" :span="24">
                    <el-checkbox-group v-model="checkList"  @change="changCheck($event)" >
                      <el-checkbox  :label="item.id" >{{ item.name }}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                </el-row>
            </div>
          </el-col>
          <el-col :span="14">
            <div class="border-bottom flex justify-between align-start margin-left" style="height:30px">
              <div>已选角色({{ roleIds.length }})个</div>
              <div><el-button v-preventReClick type="text" @click="empty">清空</el-button></div>
            </div>

            <div class="border-left height500 margin-left">
              <div class="margin-top padding-left-xs padding-right-xs">
                <!-- <el-form  class="margin-top-xl"> -->
                  <el-button v-preventReClick v-for="item in roleIds" size="mini">{{item.name}}<i class="el-icon-error el-icon--right" @click="delList(item.id)"></i></el-button>
                <!-- </el-form>        -->
              </div>
            </div>
          </el-col>
        </el-row>

         <div slot="footer" class="dialog-footer">
          <el-button v-preventReClick type="primary" @click="confirm" >确 定</el-button>
          <el-button v-preventReClick @click="open =false">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import {listSimpleRoles} from "../../../api/system/role"
export default {
  props: {
  },
  data() {
    return {
      open: false,
      queryParams:{},
      checkList:[],
      treeList:[],
      treeListcopy:[],
      roleIds:[
      ],//被选中角色的Id
    };
  },
  methods: {
    getTreeList(listId,listName,deptId){
      listSimpleRoles(deptId).then(response=>{
        this.treeList=response.data
        this.treeListcopy=response.data
      })
      if(listId.length>0){
        listId.forEach((item,index) => {
          let temp={
            id:item,
            name:listName[index]
          }
          this.roleIds.push(temp)
        });
        this.checkList=listId
      }
    },
    delList(id){
      var ID = [id]
      this.roleIds = this.roleIds.filter((item) => {
          return !ID.includes(item.id)
     });
     this.checkList = this.checkList.filter((item) => {
          return item !== id;
     });
    },
    empty(){
      this.roleIds=[]
      this.checkList=[]
    },
    emptyClose(){
      this.empty()
      this.open=false
    },
    confirm(){
      this.open = false
      this.$emit("callback",this.roleIds)
    },
    init(command,listId,listName,deptId){
      this.roleIds = []
      this.checkList = []
      this.open = true
      this.getTreeList(listId,listName,deptId);
      
    },
    inputNULL(){
      if(this.queryParams.orgName==''){
        this.treeListcopy = this.treeList
      }
    },
    changCheck(val){
      //this.roleIds=val
      console.log(val,'val--',this.treeList)
      this.roleIds=[]
      val.forEach((item) => {
        var obj=this.treeList.find(function (obj) {
          return obj.id == item;//取出this.treeList里的id为item的那条数据所有的信息
        })
        this.roleIds.push(obj)
      });
      console.log(this.roleIds,'this.roleIds0--')
    },
    // search
    search(){
      this.treeListcopy = this.treeListcopy.filter(obj => obj.name.includes(this.queryParams.orgName));

    }
  },
};
</script>
<style scoped lang="scss">
.height500{
  height: 400px;
}
.border{
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #F4F6FA;
}
::v-deep .border-bottom{
    border-bottom: 1px solid #F4F6FA;
    .el-button--small{
      padding: 0px 10px;
    }

}
.border-left{
    border-left: 1px solid #F4F6FA;
}
.border-right{
    border-right: 1px solid #F4F6FA;
}
.add{
  margin: -2px;
  margin-left: 5px;
}
::v-deep .el-button--mini{
  padding: 3px 10px;
  span{
    margin-left: 1px;
  }
}
::v-deep .el-dialog__body{
  padding: 0 0px 20px 0px;
}
</style>